<template>
  <div class="orderDetail">
    <TopBar title="订单详情" @leftClick="back" />
    <div class="add" v-if="!list.length" @click="onSwitch">
      请选择收货地址
    </div>
    <van-address-list :list="list" default-tag-text="默认" class="adr" add-button-text="确认" @add="onOk" @select="onSwitch"
      v-else />
    <div class="tips">
      <div class="title">购买须知:</div>
      <div class="content">
        <span>在点击确认之后半个小时内请添加工作人员微信(<span class="tel">{{ tel }}</span>)核对信息并付款，在核对无误后工作人员会立即给您送货到家。</span>
      </div>
      <a @click="onCopy" style="color: #1989fa;">点击复制微信</a>
    </div>
    <div class="item" v-for="item in selectList" :key="item.id">
      <div class="content">
        <img :src="item.imgList[0]?.url" alt="" width="60">
        <div>
          <div>{{ item.title }}</div>
          <span>{{ item.msg }}</span>
        </div>
      </div>
      <div class="footer">
        <span>共{{ item.value }}件商品</span>，
        <span>合计 <span class="money">￥{{ (item.value * item.price).toFixed(2) }}</span></span>
      </div>
    </div>
    <div class="total">
      <div>商品数量</div>
      <div>×{{ sum }}</div>
    </div>
    <div class="total">
      <div>商品总价</div>
      <div style="color: red;">￥{{ totalPrice.toFixed(2) }}</div>
    </div>

  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import TopBar from "@/components/topHeader/index.vue"
import { ref, onMounted } from 'vue';
import { toPage, isWeiXin } from '@/utlis/tools';
import { showSuccessToast, showToast, showConfirmDialog } from "vant"
import { addOrder, delBuyCar, modifyGoods } from "@/api"
import { useStore } from "@/store"
const store = useStore();
const router = useRouter()
const route = useRoute()
const list = ref([])
const tel = "18275341743"
const totalPrice = ref(0)
const sum = ref(0)
const selectList = ref([])

const back = () => {
  router.push('buycar')
  sessionStorage.removeItem("goodsinfo")
  sessionStorage.removeItem("address")
}
onMounted(() => {
  let v = route.query
  console.log(v);
  // 从购物车页面进入
  if (v.selectList) {
    totalPrice.value = v.totalPrice * 1
    sum.value = v.sum
    selectList.value = JSON.parse(v.selectList)
    console.log(69, selectList.value);
  }
  // 从地址页面进入
  if (route.query?.id) {
    list.value = [route.query]
    sessionStorage.setItem("address", JSON.stringify(list.value))
  }
  // 缓存
  let goodsinfo = sessionStorage.getItem("goodsinfo")
  if (goodsinfo) {
    goodsinfo = JSON.parse(goodsinfo)
    totalPrice.value = goodsinfo?.totalPrice
    sum.value = goodsinfo?.sum
    selectList.value = goodsinfo?.selectList
  } else {
    let obj = {
      totalPrice: totalPrice.value,
      sum: sum.value,
      selectList: selectList.value
    }
    sessionStorage.setItem("goodsinfo", JSON.stringify(obj))
  }
  // 地址缓存
  let address = sessionStorage.getItem("address")
  if (address) {
    address = JSON.parse(address)
    list.value = address
  }
})
const onSwitch = () => {
  router.push({
    name: 'address',
    query: {
      id: list.value[0]?.id,
      isDetail: 1
    }
  })
}
const onCopy = () => {
  var input = document.createElement("input");   // js创建一个input输入框
  input.value = tel;  // 将需要复制的文本赋值到创建的input输入框中
  document.body.appendChild(input);    // 将输入框暂时创建到实例里面
  input.select();   // 选中输入框中的内容
  document.execCommand("Copy");   // 执行复制操作
  document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
  showSuccessToast("复制成功")
}
const onOk = () => {
  showConfirmDialog({
    title: "确认提交",
    message: "请确保已经复制完工作人员微信号了"
  }).then(async () => {
    let obj = list.value[0]
    let arr = []
    let crr = []
    let brr = selectList.value.map(item => {
      arr.push({
        goodsid: item.goodsid,
        ordernum: item.ordernum,
        status: item.status,
        title: item.title,
        imgList: JSON.stringify(item.imgList),
        msg: item.msg,
        receiveInfo: `${obj.name}，${obj.tel}，${obj.address}`,
        total: item.value * item.price,
        sum: item.value
      })
      crr.push({
        id: item.goodsid,
        title: item.title,
        msg: item.msg,
        imgList: JSON.stringify(item.imgList),
        type: item.type,
        price: item.price,
        total: item.total - item.value
      })
      return item._id
    })
    // console.log(146, crr);
    const { code } = await addOrder(arr)
    if (code == 200) {
      showToast("下单成功，请尽快添加微信与工作人员联系")
      await delBuyCar({ id: brr.join(",") })
      sessionStorage.removeItem("goodsinfo")
      sessionStorage.removeItem("address")
      router.push("home")
      store.tabkey = 1
      sessionStorage.setItem("tabKey", 1)
      crr.map(item => {
        modifyGoods(item)
      })
    }
  })

}
</script>
<style lang="less" scoped>
.orderDetail {
  padding: 15px;
  padding-top: 50px;
  background-color: #f7f8fa;
  height: calc(100vh - 120px);
  overflow: auto;

  .total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .item {
    background-color: #eee;
    border-radius: 8px;
    padding: 10px 10px;
    margin-bottom: 20px;

    .content {
      display: flex;
      // justify-content: space-between;

      img {
        border-radius: 8px;
        margin-right: 15px;
      }

      >div {
        flex: 1;

        div {
          margin-bottom: 10px;
          font-weight: 500;
        }

        span {
          color: #999;
        }
      }
    }

    .footer {
      margin-top: 10px;
      text-align: right;
      font-size: 14px;
      color: #999;

      .money {
        color: #f00;
      }
    }

  }

  .tips {
    margin-bottom: 20px;

    .title {
      color: orange;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .tel {
      color: red;
    }

    .content {
      margin-bottom: 10px;
    }
  }

  .add {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
  }

  .adr {
    // border: 1px solid #999;
    padding: 0;
    border-radius: 8px;
  }

  // /deep/.van-address-list__bottom {
  // display: none;
  // }

  /deep/.van-address-list {
    height: 100px;
  }

  /deep/.van-radio__icon,
  /deep/.van-address-item__edit {
    display: none;
  }
}
</style>
